<template>
  <div id="myEchart4"></div>
</template>

<script>
import Sever from '@/api/selfApi'
const echarts = require('echarts')
export default {
  name: 'echartsTest4',

  data() {
    return {
      //Y轴的数据，和数据值位置一一对应
      cate: [],
      //数据值，顺序和Y轴的名字一一对应
      barData: []
    }
  },
  mounted() {
    this.initEchart();
  },
  methods: {
    async initEchart() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.analyse.getZgbmKfzbDesc({
          //请求参数(this.depCode是全局变量)
          dep_code: this.depCode
        })
        //取值赋给name和value
        let arr = res.map(item => {
          this.cate.push(item.ZB);
          this.barData.push(item.JGNUM)
        })
      } catch (error) {
        console.log(error)
      }
      //初始化echarts组件
      const myChart = echarts.init(document.getElementById('myEchart4'))
      myChart.clear()
      const option = {
        title: {
          show: true,
          text: '扣分指标排序', //主标题文本
          x: 'center', //水平安
          y: '10px', //垂直
          textStyle: {
            fontSize: 20,
            fontStyle: 'normal',
            fontWeight: '666',
            color: '#333'
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        //图表位置
        grid: {
          top: "40px",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        //X轴
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //不显示X轴刻度线和数字
          splitLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: {
          type: "category",
          data: this.cate,
          //升序
          inverse: true,
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //key和图间距
          offset: 10,
          //动画部分
          animationDuration: 300,
          animationDurationUpdate: 300,
          //key文字大小
          nameTextStyle: {
            fontSize: 5,
          },
        },
        series: [
          {
            //柱状图自动排序，排序自动让Y轴名字跟着数据动
            realtimeSort: true,
            name: "数量",
            type: "bar",
            data: this.barData,
            barWidth: 14,
            barGap: 10,
            smooth: true,
            valueAnimation: true,
            //Y轴数字显示部分
            label: {
              normal: {
                show: true,
                position: "right",
                valueAnimation: true,
                offset: [5, -2],
                textStyle: {
                  color: "#333",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 7,
                color: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#3977E6" },
                  { offset: 1, color: "#37BBF8" },
                ]),
              },
            },
          },
        ],
        //动画部分
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: "linear",
        animationEasingUpdate: "linear",
      }
      myChart.setOption(option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener('resize', () => myChart.resize(), false)
    }
  }
}
</script>

<style lang="scss">
#myEchart4 {
  width: 100%;
  box-sizing: border-box;
  height: 50%;
  overflow: hidden;
}
</style>
